<template>
	<cl-page background-color="#fff">
		<cl-topbar :border="false" background-color="transparent" />

		<view class="page-login">
			<!-- Logo -->
			<view class="logo">
				<image src="/static/logo.png" mode="aspectFill" />
			</view>

			<div class="container">
				<!-- 登录方式 -->
				<view class="mode">
					<view class="code">
						<cl-captcha :len="6" v-model="code" :height="100"></cl-captcha>
					</view>
					<view class="submit" @click="submit">
						<cl-button background-color="#008c8c" color="#fff">登 录</cl-button>
					</view>
				</view>
			</div>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onReady } from "@dcloudio/uni-app";
	import { useCool } from "/@/cool";

	const { storage, } = useCool();

	const code = ref("");
	const db = uniCloud.importObject('cc_code') //第一步导入云对象

	const submit = async () => {
		if (code.value.length !== 6) {
			uni.showToast({
				title: "请填写正确的标识码！",
				icon: "none"
			})
			return
		}
		const uniIdCo = uniCloud.importObject('uni-id-co')
		await uniIdCo.logout()
		
		const res = await db.code(code.value?.toLocaleLowerCase())

		if (!res.data.length) {
			uni.showToast({
				title: "标识码不存在！",
				icon: "none"
			})
			return
		}
		storage.set("code", code.value?.toLocaleLowerCase())
		await uni.showToast({
			title: "登陆成功"
		})
		code.value = ''
		uni.switchTab({
			url: "/pages/index/list"
		})
	}

	onReady(() => { });
</script>

<style lang="scss" scoped>
	.page-login {
		.logo {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 20%;

			image {
				display: block;
				height: 150rpx;
				width: 150rpx;
				border-radius: 24rpx;
				margin-bottom: 30rpx;
				box-shadow: 0 25rpx 30rpx -25rpx #666666;
			}

			text {
				font-size: 36rpx;
				font-weight: bold;
				letter-spacing: 1rpx;
				color: #333;
			}
		}

		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 80rpx;

			.mode {
				width: 90%;
			}

			.input {
				display: flex;
				align-items: center;
				background-color: #eeeeee;
				border-radius: $cl-border-radius;
				height: 80rpx;
				margin-bottom: 30rpx;
				font-size: 30rpx;
				width: 100%;

				text {
					display: inline-block;
					padding: 0 40rpx;
					border-right: $cl-border-width solid $cl-border-color;
					font-weight: bold;
					color: #404040;
				}

				input {
					height: 100%;
					flex: 1;
					padding: 0 30rpx;
				}
			}

			.code {
				width: 100%;
				margin-bottom: 30rpx;
			}

			.submit {
				width: 100%;
				height: 80rpx;
				margin-top: 60rpx;

				::v-deep .cl-button {
					font-size: 30rpx;
					width: 100% !important;
					height: 100% !important;
				}
			}
		}
	}
</style>